import { Link, useRouteMatch } from 'react-router-dom';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
function Employee({ employee, dispatch }) {
  const {
    params: { id },
  } = useRouteMatch();
  const e = employee.find((e) => e.key === id) || [];
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 8,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  const onFinish = (values) => {
    //提交的方法
    dispatch({
      type: 'employee/updateEmployee',
      payload: {
        employee: {
          ...e,
          name: values.name,
          sex: values.sex,
        },
      },
    });
    console.log(employee);
    alert('修改成功');
  };

  const onFinishFailed = (e) => {};
  return (
    <div>
      <div>
        <Form
          {...layout}
          name="basic"
          initialValues={{
            //设置默认值
            name: e.name,
            sex: e.sex,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item label="姓名" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="性别" name="sex">
            <Input />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              修改
            </Button>

            <Button>
              <Link to="/employee">返回列表</Link>
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
export default connect(({ employee }) => ({ employee }))(Employee);
